<template>
    <div v-if="src" class="play-music" :class="{move: playing}" @click="playMusic">
        <audio :src="src" loop="loop" ref="audio"></audio>
    </div>
</template>

<script>
    export default {
        name: "Music",
        data() {
            return {
                playing: false,
            };
        },
        props: {
            src: {
                type: String,
                default: '',
            },
        },
        methods: {
            playMusic() {
                let audio = this.$refs.audio;
                if (audio.paused) {
                    this.$refs.audio.play();
                    this.playing = true;
                } else {
                    this.$refs.audio.pause();
                    this.playing = false;
                }
            },
        },
    };
</script>

<style>

</style>